<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增')" />
    <style type="text/css">
        .btn-file .error{

            margin-left: 20px;
            background: #1ab394;
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-buy-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">图片上传</label>
            <div class="col-sm-8"   >
                <!--假的图片上传-->
                <label class="control-label">选择文件</label>
                <input class="projectfile" id="attach"  multiple name="file"  type="file" required />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">标题：</label>
            <div class="col-sm-8">
                <input name="title" class="form-control" type="text" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">价格：</label>
            <div class="col-sm-8">
                <input name="price" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">面积(平,纯数字)：</label>
            <div class="col-sm-8">
                <input name="area" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">房产类型：</label>
            <div class="col-sm-8">
                <input name="typehouseArea" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">优点标签</label>
            <div class="col-sm-8">
                <select id="advantage" class="form-control select2-multiple" multiple>
                    <option th:each="advantage:${advantages}" th:value="${advantage.advantageId}" th:text="${advantage.advantageName}" th:selected="${advantage.flag}" th:disabled="${advantage.status == '1'}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">是否显示：</label>
            <div class="col-sm-8" required>
                <input type="radio" name="ifNeedShow" value="1" checked />是&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="ifNeedShow" value="0" />否
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    //文件是否上传成功
    var ifUploadFile=false;
    //文件上传的id
    var uploadId=0;
    $(function() {
        //查询最大的id+1就是更新的id

        $('#advantage').select2({
            placeholder: "请选择优点标签",
            allowClear: true
        });


    })

    var prefix = ctx + "system/buy"
    $("#form-buy-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $('.projectfile').attr("disabled","")
            var data=$('#form-buy-add').serializeArray();

            var advantage = $.form.selectSelects("advantage");

            data.push({"name": "advantages", "value": advantage});

            $('.projectfile').attr("disabled","")

            mySave(prefix + "/add", data);

        }
    }
    //改造ruyisave方法
    function mySave(url, data, callback) {
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: data,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍候...");
                $.modal.disable();
            },
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                //更新插入的id,然后自动上传图片
                console.log(result)
                //得到上传id
                uploadId=result.id;
                //模拟点击上传按钮
                $('.file-footer-buttons button').trigger("click");
                $.operate.successCallback(result);

            }
        };
        $.ajax(config)
    }


    //
    $(function() {

            //点击上传事件
            $('#save').click(function(){
                if($("#attach").val() != ""){
                    $("#attach").fileinput("upload");
                    showLoading();
                }
            });

            //上传功能
            $('#attach').fileinput({
                maxFileCount:1,
                language: 'zh', //设置语言
                dropZoneTitle: '支持图片批量上传，最多1000M限制',//文字提醒
                uploadUrl:'/testUpload',//上传地址
                showRemove:false,
                showUpload:false,  // showRemove, showUpload都为false时，不会显示拖拽框
                enctype: 'multipart/form-data',
                //maxFileCount: 10,//设置文件上传数量
                maxFileSize: 1000 * 1024, //1000MB 文件上传限制大小
                uploadAsync: false,//同步上传  后台参数为MultipartFile[]，若异步参数为MultipartFile
                showCaption: true,
                showPreview: true,
                showCancel:false,
                autoReplace:true,//是否自动替换当前图片，默认为false
                showUpload:false,//显示上传按钮
                allowedFileExtensions: [ 'jpg','png'], //接收的文件后缀
                append: [],
                uploadExtraData: function(){
                    return {uploadId : uploadId};//文件上传附带的参数
                }
            }).on("fileuploaded", function (event, data, previewId, index){//上传成功后
                //fileinput设置为异步时该回调函数生效
                console.log("fileuploaded")
                //文件上传成功
                ifUploadFile=true;
                console.log("data"+data)


            }).on("filebatchselected", function(event, files) {//选择文件后处理事件
                console.log("选择文件后")
                $('.kv-file-upload').css("display","none");

                if(files.length == 0){
                    alert("导入文件格式错误，只能选择pdf文件，请重新选择");
                }
            }).on("filebatchuploadsuccess", function(event, data, previewId, index) {
                //fileinput设置为同步时该回调函数生效
                hideLoading();
                if(data.response.result == 'error'){
                    ToastUtils.error(data.response.msg);
                }else {
                    alert(data.response.msg);
                    $("#attachUploadForm .kv-file-remove").click();//上传完清空附件
                    //全部上传完成后延迟0.5秒导出目标excel文件
                    setTimeout(function () {
                        var url = ctxPath + '/attach/export';
                        var values = new Array();
                        values.push($('input[name="uploadSn"]').val());
                        openWindowWithPost(url, '导出', [ 'uploadSn' ], values);
                    }, 500);
                }
            });

        }
    )

    $(function() {


    })







</script>
</body>
</html>